<template>
  <div class="container">
    <div class="main-box">
      <div class="search-box">
        <el-input
            placeholder="请输入搜索关键词"
            suffix-icon="el-icon-search"
            v-model="searchKeyword">
        </el-input>
      </div>
      <div class="nav-bar">
        <el-radio-group :fill="'#00a1d6'" :text-color="'#fff'" v-model="nowTab" size="small">
          <el-radio-button label="最新视频" value="最新视频"></el-radio-button>
          <el-radio-button label="热门视频" value="热门视频" style="margin-left: 10px"></el-radio-button>
        </el-radio-group>
        <el-button type="primary" round class="right-upload" size="small" @click="startUploadVideo">上传视频</el-button>
      </div>
      <div class="video-area">
        <el-row :gutter="20">
          <el-col :span="4" v-for="(item,index) in videoList" :key="index">
            <div class="single-video" @click="toVideoDetail(item)">
              <img
                  :src="item.cover"
                  alt="" class="video-cover"/>
              <div class="publisher-info">
                <img :src="item.avatar" alt="" class="publisher-avatar"/>
                <div class="blank"></div>
                <div class="video-detail">
                  <div class="video-title">{{ item.title }}</div>
                  <div class="video-other-info">{{ item.username }}</div>
                  <div class="video-other-info">{{ item.view }}次播放</div>
                  <div class="create-time">{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog
        title="上传视频"
        :visible.sync="showUploadDialog"
        width="30%">
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="视频标题">
          <el-input v-model="form.title" placeholder="请输入视频标题"></el-input>
        </el-form-item>
        <el-form-item label="视频封面">
          <el-upload
              ref="coverUpload"
              :on-excess="handleExceed"
              :on-error="handleError"
              :on-success="handleCoverSuccess"
              :limit="1"
              accept=".jpg, .png, .jpeg"
              drag
              action="https://yiyuy.mynatapp.cc/info/imageToOSS">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频封面拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频文件">
          <el-upload
              ref="videoUpload"
              :on-excess="handleExceed"
              :on-error="handleError"
              :on-success="handleVideoSuccess"
              :limit="1"
              accept=".mp4, .avi, .mov, .wmv, .flv, .mkv, .rmvb, .3gp, .mpg, .mpeg, .mpe, .m1v, .m2v, .m4v, .mxf, .mts, .ts, .vob, .dat, .ifo, .ogm, .ogv, .webm, .f4v, .f4p, .f4a, .f4b, .m4v,"
              drag
              action="https://yiyuy.mynatapp.cc/info/imageToOSS">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频源文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频简介">
          <el-input resize="none" type="textarea" :rows="2" placeholder="请输入视频简介"
                    v-model="form.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showUploadDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitVideo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {clickVideo, getVideoList, uploadVideo} from "@/api/video";
import moment from "moment";

export default {
  name: "ScienceVideo",
  data() {
    return {
      videoList: [],
      // 搜索关键词
      searchKeyword: '',
      nowTab: '最新视频',
      showUploadDialog: false,
      form: {
        title: '',
        cover: '',
        videoSrc: '',
        introduction: ''
      }
    }
  },
  methods: {
    handleExceed() {
      this.$message.warning('只能上传一个文件')
    },
    handleError() {
      this.$message.error('上传失败')
    },
    handleCoverSuccess(response, file, fileList) {
      console.log(response)
      this.$message.success('封面上传成功')
      this.form.cover = response.data;
    },
    handleVideoSuccess(response, file, fileList) {
      console.log(response)
      this.$message.success('视频源文件上传成功')
      this.form.videoSrc = response.data;
    },
    startUploadVideo() {
      this.showUploadDialog = true;
      this.form = {
        title: '',
        cover: '',
        videoSrc: '',
        introduction: ''
      }
    },
    toVideoDetail(item) {
      clickVideo(item.id);
      this.$router.push({path: '/home/videoDetail', query: {item: item}})
    },
    submitVideo() {
      uploadVideo(this.form).then(res => {
        this.$message.success('视频上传成功');
      })

      this.form = {
        title: '',
        cover: '',
        videoSrc: '',
        introduction: '',
      }
      this.showUploadDialog = false;
      this.$refs.coverUpload.clearFiles()
      this.$refs.videoUpload.clearFiles()
    },
    getUploadVideoList() {
      let searchType = 0;
      this.nowTab === '最新视频' ? searchType = 0 : searchType = 1;
      console.log(searchType)
      getVideoList(searchType).then(res => {
        this.videoList = res.data;
        for (let i = 0; i < this.videoList.length; i++) {
          // 格式化一下时间为yyyy-MM-dd
          this.videoList[i].createTime = moment(this.videoList[i].createTime).format('YYYY-MM-DD');
        }
      })
    }
  },
  mounted() {
    this.getUploadVideoList();
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  background-color: #f2f2f8;
  animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);

  .main-box {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .search-box {
      width: 30%;
      margin: 10px auto;

      /deep/ .el-input__inner {
        border-radius: 20px;
        background-color: hsl(0 0% 100% / .74);
        outline: transparent solid 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .nav-bar {
      display: flex;
      align-items: center;
      margin-bottom: calc(14px * 2.25);;

      /deep/ .el-radio-button__inner {
        border-radius: 20px;
        border-left: 1px solid #DCDFE6;
      }

      .right-upload {
        margin-left: auto;
        background-color: #00a1d6;
      }
    }

    .video-area {
      flex: 1;
      width: 100%;
      overflow-y: auto;

      .single-video {
        box-sizing: border-box;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .3s;
        border-radius: 12px;
        margin-bottom: calc(14px * 1);
        width: 100%;
        cursor: pointer;
        animation: MoveIn .5s cubic-bezier(.4, 0, .2, 1);

        .video-cover {
          width: 100%;
          height: 154px;
          border-radius: 12px;
        }

        .publisher-info {
          display: flex;

          .publisher-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }

          .blank {
            width: 5%;
          }

          .video-detail {
            flex: 1;

            .video-title {
              width: 90%;
              font-size: 15px;
              white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 隐藏超出容器的文本 */
              text-overflow: ellipsis;
            }

            .video-other-info {
              font-size: 14px;
              color: #323B49CC;
            }

            .create-time {
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 12px;
              background-color: #83839121;
              padding: 2px;
              font-size: calc(14px * .875);
              margin-top: 5px;
              color: #3A455599;
            }
          }
        }
      }

      .single-video:hover {
        box-shadow: 0 0 10px 0 #0000001A;
        transform: scale(1.02);
      }
    }

    .video-area::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>